        <!DOCTYPE html>
        <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <meta http-equiv="X-UA-Compatible" content="ie=edge">
                    <title>Document</title>
                </head>
                <body>
                    <style>
                    *{
                        margin: 0px;
                        padding: 0px;
                        list-style: none;
                    }
                    textarea{
                        width: 800px;
                        margin: 10px auto;
                        display: block;
                        resize: none;
                        outline: none;
                        }
                        button{
                            width: 800px;
                            margin: 10px auto;
                            display: block;
                            background: #f60;
                            border: none;
                            cursor: pointer;
                            line-height: 40px;
                            color: white;
                        }
                        ul{
                            width: 800px;
                            margin: 10px auto;
                            display: block;
                        }
                        li{
                            background: #FFCC22;
                            padding: 10px;
                            margin-bottom: 10px;
                            position: relative;
                        }
                        span{
                            position: absolute;
                            right: -5px;
                            top: -5px;
                            cursor: pointer;
                        }


                    </style>


        <textarea name="" id="ka" cols="30" rows="10"></textarea>
        <button id="btn">发布微博</button>


            <ul id="con">
                <li>
                    今天又是元气满满的一天
                <p>2021-06-15</p>
                <span onclick="del(this)">X</span>
                </li>
            </ul>

            <script>
            var con=document.getElementById('con')
            var txt=document.getElementById('ka')
            var btn=document.getElementById('btn')

            btn.onclick=function(){
                //非空判断
                
                /*if(txt.value==''){
                     alert('请输入内容')
                 }else{*/

                var tag=document.createElement('li');
                tag.innerHTML=`${txt.value}
                <p>2021-06-01</p>
                <span onclick="del(this)">X</span>`;
                //追加标签
                con.appendChild(tag)
                //修改值
                txt.value='' 
            }

            function del(a){
                a.parentNode.parentNode.removeChild(a.parentNode)
            }
            
            </script>
                </body>
        </html>